<template>
	<view class="root">
		<view @click="operation('avatar')" class="fd-row jc-sb bgc-fff pt-22 pb-22 pl-30 pr-30">
			<image
				class="avatar bgc-eee br-circle"
				:src="userInfo.avatarUrl || `/static/img/default-avatar.png`"
				mode="aspectFill"
			/>
			<label>
				<text class="color-999 fs-28 mr-12">修改头像</text>
				<uni-icons type="arrowright" color="#999" />
			</label>
		</view>

		<view v-for="(options, index) in section" :key="index" class="mt-10">
			<view
				v-for="(option, key) in options"
				:key="key"
				class="fd-row jc-sb bgc-fff mb-2 pl-30 pr-30 pt-40 pb-40"
				@click="operation(key)"
			>
				<text class="fs-30 color-333">{{ option.title }}</text>
				<label>
					<input
						class="input f1 color-666 pl-12 pr-12 fs-28 text-right"
						type="text"
						:maxlength="option.maxlength"
						:placeholder="option.placeholder"
						:disabled="option.disabled"
						:value="option.value"
						placeholder-style="color: #999"
						@blur="setUserInfo($event, key, index)"
					/>
					<uni-icons v-if="option.icon" :type="option.icon" color="#999" />
				</label>
			</view>
		</view>

		<button
			class="br-20 bgc-4672ff color-fff fs-34 fw-600 lh-3"
			:style="{ margin: `98rpx 20rpx` }"
			hover-class="tap-hover"
			@click="logout"
		>
			退出登录
		</button>
		<view
			:style="{ transform: 'translateX(-50%)' }"
			class="fixed bottom-88 left-50percent ai-center"
		>
			<text v-if="version" class="fs-26 mb-30 color-999"> version: {{ version }} </text>

			<navigator
				class="color-1c9dff fs-22"
				hover-class="tap-hover"
				hover-start-time="50"
				:url="'privacy' | webviewURL($config)"
			>
				隐私政策
			</navigator>
			<navigator
				class="color-1c9dff fs-22"
				hover-class="tap-hover"
				:url="'protocol' | webviewURL($config)"
			>
				用户使用协议
			</navigator>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Storage, combineURLs, transformURL } from "@/static/libs/utils";

	@Component({
		filters: {
			webviewURL(type: string, { currentEnv, path }: AnyObject): string {
				/**
				 *  fetch(location.origin + location.hash.slice(1) + location.search)
				 *	  .then(res => res.json())
				 *	  .then(res => document.write(res.data.content));
				 */
				return (
					"/pages/common/webview?url=" +
					transformURL(
						combineURLs(currentEnv.http, path.richText),
						{ token: Storage.get("authorization") },
						path.api + "/" + type
					)
				);
			},
		},
	})
	export default class setting extends Vue {
		// component property
		userInfo: AnyObject = {};
		version: string | void = "";

		public get section(): AnyObject[] {
			const { userInfo } = this;
			return [
				{
					// nickName: {
					// 	title: "昵称",
					// 	placeholder: "--",
					// 	icon: "compose",
					// 	maxlength: 16,
					// 	disabled: true,
					// 	value: userInfo.nickname,
					// },
					address: {
						title: "地址",
						placeholder: "收货地址管理",
						icon: "arrowright",
						maxlength: -1,
						disabled: true,
					},
				},
				{
					// phoneNumber: {
					// 	title: "手机号码",
					// 	placeholder: userInfo.mobile || "--",
					// 	disabled: true,
					// },
					identity: {
						title: "当前身份",
						el: "input",
						placeholder: userInfo.nickname || "--",
						disabled: true,
					},
				},
			];
		}

		onLoad() {
			// #ifdef MP
			this.version = uni.getAccountInfoSync().miniProgram.version;
			// #endif
			// #ifdef APP-PLUS
			this.version = plus?.runtime?.version;
			// #endif

			uni.showLoading({ title: "Loading...", mask: true });
			this.$request.get("/userInfo").then(({ data }) => {
				this.userInfo = data;
				uni.hideLoading();
			});
		}

		async operation(key: string) {
			switch (key) {
				case "avatar":
					const [chooseFail, chooseRes]: any = await uni.chooseImage({ count: 1 });
					if (chooseFail) return;

					uni.showToast({ title: "Uploading...", icon: "loading" });
					const [uploadFail, uploadRes]: any = await uni.uploadFile({
						url: this.$config.API_URL + "/upimg",
						name: "file",
						filePath: chooseRes.tempFilePaths[0],
						header: { token: Storage.get("authorization") },
					});
					if (uploadFail) {
						uni.showToast({ icon: "none", title: uploadFail.errMsg });
						return;
					}
					const { data } = JSON.parse(uploadRes.data);

					const { msg: title } = await this.$request.get("/userInfoHandle", {
						avatarUrl: data,
					});

					this.userInfo.avatarUrl = chooseRes.tempFilePaths[0];
					uni.showToast({ title });
					break;
				case "address":
					uni.navigateTo({ url: "/pages/main/getAddress" });
					break;
				default:
					break;
			}
		}

		setUserInfo({ detail }: AnyObject, key: string, index: number) {
			if (!detail.value || key !== "nickName" || detail.value === this.section[index][key].value)
				return;

			this.$request
				.get("/userInfoHandle", { nickname: detail.value })
				.then(({ msg: title }) => uni.showToast({ title }));
		}

		logout() {
			Storage.clear();
			uni.reLaunch({ url: this.$config.page.authorization });
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	.root {
		.avatar {
			width: 124rpx;
			height: 124rpx;
		}
	}
</style>